<template>
  <div class="task" id="task">
    <div class="table-container">
      <TableWithPageNoCard :table-data="tableData" row-key="id" :border="false" stripe :has-page="true"
        @load-page-data="loadTaskPageData" :count="total">
        <template #toolbar>
          <!-- 爬虫任务管理 -->
          <div class="bar">
            <div class="title">
              <h3>爬虫任务管理</h3>
            </div>
            <div class="options">
              <el-input class="input" v-model="searchInput" placeholder="请输入检索内容"></el-input>
              <el-select v-model="selectedTaskStatus" placeholder="点击选择任务状态" style="width: 180px">
                <el-option label="运行中" value="Running" />
                <el-option label="已暂停" value="Paused" />
                <el-option label="未启动" value="Init" />
              </el-select>
              <el-button class="btn" style="background: #456a9e; color: white; border: none" type="primary"
                @click="handleSearch">搜索</el-button>
              <!-- <el-button class="btn" style="background: #456a9e; color: white; border: none"
                type="primary">新增任务</el-button>
              <el-button class="btn" style="background: #22c55e; color: white; border: none"
                type="primary">批量启动</el-button>
              <el-button class="btn" style="background: #ef4444; color: white; border: none"
                type="primary">上传数据网站</el-button> -->
            </div>
          </div>
        </template>
        <el-table-column label="网站名称" prop="netName"></el-table-column>
        <el-table-column label="网站链接" prop="url"></el-table-column>
        <el-table-column label="执行间隔（秒）" prop="interval"></el-table-column>
        <el-table-column label="最近执行时间" prop="startTime">
          <template #default="scope">
            {{ dayjs(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column label="任务状态" prop="status">
          <template #default="scope">
            <el-tag :type="scope.row.status.startsWith('Running') ? 'success' : scope.row.status.startsWith('Init') ? 'warning' : 'info'
              " size="small" round>
              {{ scope.row.status.startsWith('Running') ? "运行中" : scope.row.status.startsWith('Init') ? "未启动" : "已暂停" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="">
          <template #default="scope">
            <!-- <el-button type="text" size="small" style="color: #456a9e; font-size: 14px"
              @click="() => handleDetail(scope.row)">
              详情
            </el-button> -->
            <el-button type="text" size="small" style="color: #22c55e; font-size: 14px"
              @click="() => handleStart(scope.row)">
              启动
            </el-button>
            <el-button type="text" size="small" style="color: #E6A23C; font-size: 14px"
              @click="() => handlePause(scope.row)">
              暂停
            </el-button>
          </template>
        </el-table-column>
      </TableWithPageNoCard>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import TableWithPageNoCard from '@/components/table/TableWithPageNoCard.vue'
import { getTaskList, startTask, stopTask } from '@/api/task-manage'
import dayjs from 'dayjs'
const searchInput = ref('')
const selectedTaskStatus = ref('')
// 列表数据
const tableData = ref<any[]>([])
// 总页数
const total = ref(0)
const handlePause = async (row: any) => {
  console.log('暂停任务', row)
  const res = await stopTask(row.id)
  if (res.code === 0) {
    loadTaskPageData(1, 10)
  }
}
// 详情
const handleDetail = async (row: any) => {
  console.log('任务详情', row)

}
// 启动任务
const handleStart = async (row: any) => {
  console.log('启动任务', row)
  const res = await startTask(row.id)
  if (res.code === 0) {
    loadTaskPageData(1, 10)
  }
}
// 获取任务列表
const loadTaskPageData = async (pageNo: number, pageSize: number) => {
  const taskList = await getTaskList(selectedTaskStatus.value, searchInput.value, pageNo, pageSize)
  if (taskList.code === 0) {
    tableData.value = taskList.data.list
    total.value = taskList.data.total
  }
}
// 搜索
const handleSearch = async () => {
  const taskList = await getTaskList(selectedTaskStatus.value, searchInput.value, 1, 10)
  if (taskList.code === 0) {
    tableData.value = taskList.data.list
    total.value = taskList.data.total
  }
}
onMounted(() => {
  loadTaskPageData(1, 10)
})
</script>
<style lang="scss" scoped>
.task {
  padding: 24px;
  background-color: #1f2a37;
  border: 1px solid #374151;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;

  .table-container {
    .bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .title {
        h3 {
          font-size: 20px;
          color: #ffffff;
          margin: 0;
          padding: 0;
        }
      }

      .options {
        display: flex;
        gap: 8px;

        .input {
          border: 1px solid #374151;
          border-radius: 6px;
          color: white;
          font-size: 14px;
          width: 200px;
        }

        .btn {
          padding: 8px 16px;
          font-size: 14px;
          border-radius: 6px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
